@import "bourbon";
@import "neat";
@import "bourbon";

.join-container{
  display: flex;
  justify-content: center;   
}

.join-box {
  $base-border-radius: 3px !default;
  $base-background-color: white !default;
  $dark-gray: #333 !default;
  $light-gray: #ddd !default;
  $base-font-color: $dark-gray !default;
  $flex-box-border-color: $light-gray;
  $flex-box-border: 1px solid $flex-box-border-color;
  $flex-box-background: lighten($light-gray, 10%);
  $flex-box-gutter: 0.4em;
  $flex-box-width: 18em;
  $flex-box-color: transparentize($base-font-color, 0.3);

  text-align: center;
  width: 30%;
  @include transition (all 0.2s ease-in-out);
  background: $flex-box-background;
  border-radius: $base-border-radius;
  box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 4px darken($base-background-color, 10%);
  display: block;
  margin: $flex-box-gutter;
  margin-top: 6em;
  padding: 2em 2em 3em;
  text-decoration: none;
  border-top: 6px solid #ccc;

  &:focus,
  &:hover {
    background-color: transparentize(#CCC, 0.9);
  }


  img {
    display: block;
    height: 3em;
    margin-bottom: 2em;
    margin: auto;
  }


  .flex-title {
    color: $flex-box-color;
    font-size: 1.2em;
    font-weight: 800;
    margin-bottom: 0.5em;
  }


  p {
    color: transparentize($flex-box-color, 0.1);
    line-height: 1.5em;
    margin: auto;
  }


  input[type='button'] {
    width: 100%;
    margin-bottom: 2em;
  }

  a {
  }

}
